<!-- 下面左侧导航栏 -->
<template>
  <!-- 底下里面的两个容器 -->
   <!-- 下面左侧 -->
  <div class="container">
    
    <div class="nav">
      
          
      <el-row class="tac">
     
     <el-col :span="1">
       <el-menu
         active-text-color="#457bd3"
         background-color="#1c1e21"

         class="el-menu-vertical-demo"
         default-active="1"
         text-color="#abadb0"
         @open="handleOpen"
         @close="handleClose"
       >
         <el-menu-item index="1">
           <el-icon></el-icon>
           <router-link to="/app/Model_Training/general" class="sty">使用概况</router-link>
         </el-menu-item>
         
         <el-menu-item index="2">
           <el-icon></el-icon>
           <router-link to="/app/Model_Training/annotation" class="sty">样本标注</router-link>
         </el-menu-item>

         <el-menu-item index="3">
           <el-icon></el-icon>
           <router-link to="/app/Model_Training/manage" class="sty">样本管理</router-link>
         </el-menu-item>

         <el-menu-item index="4">
           <el-icon></el-icon>
           <router-link to="/app/Model_Training/ModelTraining" class="sty">模型训练</router-link>
         </el-menu-item>

         <el-menu-item index="5">
           <el-icon></el-icon>
           <router-link to="/app/Model_Training/ManagingModels" class="sty">模型管理</router-link>
         </el-menu-item>
         
       </el-menu>
     </el-col>
   </el-row>
    </div>
    <!-- 下面右侧 -->
    <div class="content">
      
      <router-view></router-view> <!-- 动态内容展示 -->
    </div>

  </div>

  

</template>


<script setup lang="ts">
          /* elm的东西 */
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>



<style lang="scss" scoped>

.container{
  display: flex;
 // margin: 25px 0px;
  height: 95vh;
}
.nav {
  flex: 1;
  background-color: #1c1e21;
    
}


.content{
  flex: 9;
  position: relative;
  //height: 655.2px;
}.sty {
  
  color: #abadb0;
  text-decoration: none; /* 移除下划线 */
}
.router-link-active {
  color: #4584ff; /* 点击后变蓝色 */
}
.content{
  background-color: rgb(24,25,26);
}
    /* elm样式穿透 */
:deep(.el-menu){
  --el-menu-bg-color: none;
  --el-menu-hover-bg-color: none;
  border-right: none;
}

</style>
